@import "../constant.scss";
.Loading-Component-Wrapper {
	
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 101;
	background-color: $backgroundColor;
	transition:opacity .3s;
  .Loading-Main {
		width: $loadingWidth;
    height: $loadingWidth;
    left: 50%;
    top: 50%;
    margin-left: -$loadingWidth/2;
    margin-top: -$loadingWidth/2;
    box-sizing: border-box;
    border-radius: 50%;
    border-top: 7px solid #3888fa;
    position: relative;
    animation: load-box-anim 2s linear infinite; //动画名为a1，在下面定义
    //设置圆角再设置边框就会有弧线的效果
	}
	.Loading-Main:before,
  .Loading-Main:after {
    content: "";
    width: $loadingWidth;
    height: $loadingWidth;
    position: absolute;
    left: 0;
    top: -7px; //反复调节得到的数值
    box-sizing: border-box;
    border-radius: 50%;
    //在盒子的左边加两个伪类元素
  }
  .Loading-Main:before {
    border-top: 7px solid #e67e22;
    transform: rotate(120deg); //让其中一个伪类元素旋转至右边
  }
  .Loading-Main:after {
    border-top: 7px solid #ff005a;
    transform: rotate(240deg); //旋转至左边
  }
  span {
    color: $spanColor;
    font-size: $fontSize;
    text-align: center;
    line-height: $loadingWidth;
    animation: load-span-anim 2s linear infinite;
    //给文字也定义一个动画
  }
	//让盒子旋转起来
  @keyframes load-box-anim {
    to {
      transform: rotate(360deg);
    }
  }
	//让文字迷离扑朔
  @keyframes load-span-anim {
		0% {
			opacity: 1;
		}
    50% {
      opacity: 0.5;
    }
		100% {
			opacity: 1;
		}
  }
	
}

  